<script setup>
import { ref, onMounted } from 'vue';
import { getOrderListAPI } from '@/apis/checkout';

const orderInfos = ref([]);

const getOrderList = async () => {
  await getOrderListAPI().then((res) => {
    orderInfos.value = res.data.records;
    console.log(res.data);
  }).catch((err) => {
    console.error(err);
  });

};
onMounted(() => {
  getOrderList();
});
</script>

<template>
  <div class="order-list">
    <div class="container">
      <div class="order" v-if="orderInfos.length === 0">
        <el-empty description="订单列表为空">
                    <el-button type="primary" @click="$router.push('/')">随便逛逛</el-button>
                  </el-empty>
      </div>
      <div class="order" v-for="orderInfo in orderInfos" :key="orderInfo.id">
        <div class="order-item">
          <el-row class="order-head">
            <el-col :span="16">
              <p>{{ orderInfo.createTime }}</p><b>|</b>
              <p>{{ orderInfo.receiveName }}</p><b>|</b>
              <p>订单号：{{ orderInfo.orderNo }}</p>
            </el-col>
            <el-col :span="8">应付金额：{{ orderInfo.totalPrice }}</el-col>
          </el-row>
          <hr>  
          <el-row class="order-body">
            <el-col :span="16">
              <div class="product-list">
                <el-row class="product-item" v-for="item in orderInfo.products" :key="item.id">
                  <el-col :span="4"><img :src="'/api/images/' + item.productImage" alt=""></el-col>
                      <el-col :span="20" class="product-info">
                        <el-row class="product-name">
                          <p>{{ item.productName }}</p>
                        </el-row>
                        <el-row class="product-price">
                          <p>{{ item.productPrice }}</p><p>x</p><p>{{ item.productNum }}</p>
                        </el-row>
                      </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8" class="status">{{ orderInfo.statusDesc }}</el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-list {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;

  .order {
    .order-item {
      background-color: #f7f7f7;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      width: 100%;

      .order-head {
        margin-bottom: 10px;
        color: #999;
        p {
          margin-right: 10px;
          display: inline-block;
        }

        b {
          margin: 0 10px;
          color: #999;
        }
      }

      .order-body {
        .product-list {
          .product-item {
            margin-bottom: 10px;

            img {
              height: 80px;
            }

            .product-info {

              p {
                margin: 0;
                line-height: 1.5;
                font-size: 16px;
              }
              .product-name {
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 20px
              }

              .product-price {
                color: #ffaa00;
                p{
                  margin-left: 5px;
                }
              }

            }
          }
        }

        .status{
          color: #ffaa00;
          font-size: 18px;
        }
      }

    }
  }
}
</style>
